
let goods_look = document.querySelector(`.goods_look`);// 查看商品
let goods_add = document.querySelector(`.goods_add`);//商品添加
let goods_del = document.querySelector(`.goods_del`);//商品删除
let goods_updata = document.querySelector(`.goods_updata`);//商品更新
let goods_body = document.querySelector(`.goods_body`);//商品主体
let pages = document.querySelector(`.page`);//分页
var goods_obj;
let g_details = document.querySelector(`.g_details`);//详情
let goods_sort = document.querySelector(`.goods_sort`);//排序li
let user_name = JSON.parse(localStorage.getItem('userData')).userAccount;//用户名
let user_pass = JSON.parse(localStorage.getItem('userData')).userCypher;//密码
let user_img = JSON.parse(localStorage.getItem('userData')).img;//头像
// 渲染
// 分页
function data(goods_page, arr) {
    $.ajax({
        type: `GET`,
        url: `https://liu.zzgoodqc.cn/goodsx/listByPage`,
        data: {
            limit: 9,//每页展示几项(需要与分页limit一致)
            page: goods_page//页码
        },
        dataType: 'json',
        success: (a) => {
            var aa = a.data
            let str;
            console.log(aa);
            goods_body.innerHTML = ``
            aa.forEach(item => {
                if (item.status == 1) {
                    str = '上架'
                } else {
                    str = '下架'
                }
                goods_body.innerHTML += `
                    <ul>
                        <li>${item.goods_name}</li>
                        <li><img src="${item.img}" alt="1"></li>
                        <li>${item.price}</li>
                        <li>${item.sold}</li>
                        <li>${str}</li>
                        <li>${item.stock}</li>
                        <li class="last_li"><button onclick="goods_details(${item.id})">详情</button><button onclick="del(${item.id})">删除</button></li>
                    </ul>
                `
            })
            // sessionStorage.setItem('pageNumber',aa.length)
        },
        error: (e) => {
            alert(`请求失败`)
        }
    })
}
data(1)


// 查看全部商品
function look() {
    goods_look.addEventListener('click', () => {
        data(1)
    })
}
look()


// 添加商品
goods_add.addEventListener('click', () => {
    goods_body.innerHTML = `
        <ul>
            <li><input type="text" placeholder="名称-必填"></li>
            <li><input type="text" placeholder="图片地址-必填"></li>
            <li><input type="text" placeholder="价格-必填"></li>
            <li><input type="text" placeholder="已售-必填"></li>
            <li class="st_li">
                <label for="status">上架<input type="radio">(不选为下架)</label>
            </li>
            <li><input type="text" placeholder="必填"></li>
            <li><button onclick="confirm_add()">确认添加</button></li>
        </ul>
    `
    pages.classList.add(`hide`)
})
// 确认添加
function confirm_add() {
    let inps = document.querySelectorAll(`.goods_body ul li input`)
    let num;
    let is = true
    // console.log(inps.every(i => i.value != ``));
    inps.forEach(i => {
        if (i.value == ``) {
            is = false
        }
    })

    if (is) {
        if (inps[4].value) {
            num = 1
        } else {
            num = 2
        }
        let data_ = {
            goods_name: inps[0].value,
            img: inps[1].value,
            price: inps[2].value,
            sold: inps[3].value,
            status: num,
            stock: inps[5].value,
        }
        // data(`POST`,data_,`https://result.eolink.com/NUPerrp561bd641f17dcca996d57132f30db1b99d775b77?uri=/goodsx/add`)
        $.ajax({
            type: `POST`,
            url: `https://liu.zzgoodqc.cn/goodsx/add`,
            data: data_,
            dataType: 'json',
            success: (a) => {
                console.log(`成功`);
                pages.classList.remove(`hide`)
                data(1)
            },
            error: (e) => {
                alert(`请求失败`)
            }
        })
    } else {
        alert(`请检查必填项是否填写`)
    }
}

// 删除
function del(gid) {
    $.ajax({
        type: `GET`,
        url: `https://liu.zzgoodqc.cn/goodsx/delete`,
        data: {
            id: gid
        },
        dataType: 'json',
        success: (a) => {
            console.log(`请求成功`);
            data(1)
            page()
        },
        error: (e) => {
            alert(`请求失败`)
            console.log(gid);
        }
    })
}

// 搜索
function goods_search() {
    let search_inp = document.querySelector(`.goods_search`).value
    $.ajax({
        type: `POST`,
        url: `https://liu.zzgoodqc.cn/goodsx/search`,
        data: {
            goods_name: search_inp
        },
        dataType: 'json',
        success: (a) => {
            var aa = a.data
            let str;
            // console.log(aa);
            goods_body.innerHTML = ``
            aa.forEach(item => {
                if (item.status == 1) {
                    str = '上架'
                } else {
                    str = '下架'
                }
                goods_obj = JSON.parse(JSON.stringify(aa))
                goods_body.innerHTML += `
                    <ul>
                        <li>${item.goods_name}</li>
                        <li><img src="${item.img}" alt="1"></li>
                        <li>${item.price}</li>
                        <li>${item.sold}</li>
                        <li>${str}</li>
                        <li>${item.stock}</li>
                        <li><button onclick="goods_details(${item.id})">详情</button><button onclick="del(${item.id})">删除</button><button onclick="updata(${item.id})">更新</button></li>
                    </ul>
                `
            })
        },
        error: (e) => {
            alert(`请求失败`)
        }
    })
}

// 更新商品
goods_updata.addEventListener('click', () => {
    $.ajax({
        type: `GET`,
        url: `https://liu.zzgoodqc.cn/goodsx/goodslist`,
        dataType: 'json',
        success: (a) => {
            var aa = a.data
            let str;
            goods_body.innerHTML = ``
            aa.forEach(item => {
                if (item.status == 1) {
                    str = '上架'
                } else {
                    str = '下架'
                }
                goods_body.innerHTML += `
                        <ul>
                            <li>${item.goods_name}</li>
                            <li><img src="${item.img}" alt="1"></li>
                            <li>${item.price}</li>
                            <li>${item.sold}</li>
                            <li>${str}</li>
                            <li>${item.stock}</li>
                            <li><button onclick="updata(${item.id})">点击更新</button></li>
                        </ul>
                    `
            })
            goods_obj = JSON.parse(JSON.stringify(aa))
            pages.classList.add(`hide`)
        },
        error: (e) => {
            alert(`请求失败`)
        }
    })
})


// 点击更新
function updata(gid) {
    let item = goods_obj.find(i => i.id == gid)
    goods_body.innerHTML = `
    <ul>
       <li><input type="text" value="${item.goods_name}"></li>
       <li><input type="text" value="${item.img}"></li>
       <li><input type="text" value="${item.price}"></li>
       <li><input type="text" value="${item.sold}"></li>
       <li class="g_status"><input  type="text" value="${item.status}">(1为上架,2为下架)</li>
       <li><input type="text" value="${item.stock}"></li>
       <li><button onclick="sure(${gid})">确定更新</button></li>
    </ul>
    `
}
// 确定更新
function sure(gid) {
    let inp = document.querySelectorAll(`.goods_body ul li input`)
    let iss = true
    inp.forEach(i => {
        if (i.value == '') {
            iss = false
        }
    })
    if (iss) {
        $.ajax({
            type: `POST`,
            url: `https://liu.zzgoodqc.cn/goodsx/update`,
            data: {
                id: gid,
                goods_name: inp[0].value,
                img: inp[1].value,
                price: inp[2].value,
                sold: inp[3].value,
                status: inp[4].value,
                stock: inp[5].value,
            },
            dataType: 'json',
            success: (a) => {
                data(1)
            },
            error: (e) => {
                alert(`请求失败`)
            }
        })
    } else {
        alert(`请确认所有选项是否填写`)
    }
}

// 详情
function goods_details(gid) {
    $.ajax({
        type: `GET`,
        url: `https://liu.zzgoodqc.cn/goodsx/detail`,
        data: {
            id: gid
        },
        dataType: 'json',
        success: (a) => {
            sessionStorage.setItem('goodsDetails', JSON.stringify(a.data))
            let str;
            if (a.data.status == 1) {
                str = '上架'
            } else {
                str = '下架'
            }
            g_details.innerHTML = `
                <li class="li_1">商品id:<span>${a.data.id}</span></li>
                <li class="li_2">商品名称:<span>${a.data.goods_name}</span></li>
                <li class="li_3">商品价格:<span>${a.data.price}</span></li>
                <li class="li_4">商品已售:<span>${a.data.sold}</span></li>
                <li class="li_5">商品状态:<span>${str}</span></li>
                <li class="li_6">商品库存:<span>${a.data.stock}</span></li>
                <li class="li_7">商品创建日期:<span>${a.data.created_at.substring(0, 10)}</span></li>
                <li class="li_8">商品修改日期:<span>${a.data.updated_at.substring(0, 10)}</span></li>
                <img src="${a.data.img}" alt="1">
                <button onclick="g_bank()">返回</button>
            `
            pages.classList.add(`hide`)
            g_details.classList.remove(`hide`)
            console.log(`成功`);
        },
        error: (e) => {
            alert(`请求失败`)
        }
    })
}
// 详情返回
function g_bank() {
    g_details.classList.add(`hide`)
}

// 排序
function g_sort() {
    let up_down = document.querySelector(`.up_down`).value//升序降序
    let p_s_s = document.querySelector(`.p_s_s`).value//价格库存已售
    $.ajax({
        type: `GET`,
        url: `https://liu.zzgoodqc.cn/goodsx/sort`,
        data: {
            sort: up_down,//升序:asc 降序：desc
            type: p_s_s,//价格:price  库存:stock 已售:sold
            page: 1,//页码
            limit: 9,//数量
        },
        dataType: 'json',
        success: (a) => {
            var aa = a.data
            let str;
            goods_body.innerHTML = ``
            aa.forEach(item => {
                if (item.status == 1) {
                    str = '上架'
                } else {
                    str = '下架'
                }
                goods_body.innerHTML += `
                    <ul>
                        <li>${item.goods_name}</li>
                        <li><img src="${item.img}" alt="1"></li>
                        <li>${item.price}</li>
                        <li>${item.sold}</li>
                        <li>${str}</li>
                        <li>${item.stock}</li>
                        <li class="last_li"><button onclick="goods_details(${item.id})">详情</button><button onclick="del(${item.id})">删除</button></li>
                    </ul>
                `
            })
        },
        error: (e) => {
            alert(`请求失败`)
        }
    })

}

// 点击切换分页
pages.addEventListener('click', () => {
    if (Number(event.target.dataset.page)) {
        data(event.target.dataset.page)
    } else {
        event.preventDefault()
    }
})

// 页面框架js
layui.use(['element', 'layer', 'util'], function () {
    var element = layui.element;
    var layer = layui.layer;
    var util = layui.util;
    var $ = layui.$;
    //头部事件
    util.event('lay-header-event', {
        menuLeft: function (othis) { // 左侧菜单事件
            layer.msg('展开左侧菜单的操作', { icon: 0 });
        },
        menuRight: function () {  // 右侧菜单事件
            layer.open({
                type: 1,
                title: '更多',
                content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                area: ['260px', '100%'],
                offset: 'rt', // 右上角
                anim: 'slideLeft', // 从右侧抽屉滑出
                shadeClose: true,
                scrollbar: false
            });
        }
    });
});

// 获取分页数量
function page() {
    $.ajax({
        type: `GET`,
        url: `https://liu.zzgoodqc.cn/goodsx/goodslist`,
        // data: data_,
        dataType: 'json',
        success: (a) => {
            var aa = a.data
            // 分页
            layui.use(function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: 'demo-laypage-normal-2',
                    limit: 9,//每页展示几项
                    count: aa.length, // 数据总数
                    prev: false,//上一页
                    next: false//下一页
                });
            });
        },
        error: (e) => {
            alert(`请求失败`)
        }
    })
}
page()

// 头像 用户名
// document.querySelector(`#user`).innerHTML = `<img src="${user_img}" class="layui-nav-img">`
document.querySelector(`#user_image`).append(user_name)
// 个人中心
document.querySelector(`#personal_center`).addEventListener('click', () => {
    location.assign(`./个人中心.html`)
})
// 退出登录
document.querySelector(`#exit`).addEventListener('click', () => {
    let is = confirm('确定退出登录吗?')
    if (is) {
        location.replace('./登录.html')
    }
})



























